<template>
  <div>
    <div style="margin-bottom:20px">
      <el-input v-model="name" style="width:200px" placeholder="请输入分类名称"></el-input>
      <el-select v-model="value" clearable placeholder="请选择分类类别">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-button type="warning" style="margin-left:10px" @click="loadCategory()">查询</el-button>
      <el-button type="warning" style="margin-left:10px" @click="resetSearch()">清空</el-button>
      <el-button type="primary" style="margin-left:10px" @click="handleAddCategory()">新增类别</el-button>
    </div>
    <div>
      <el-table :data="records" border :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" style="width: 100%">
        <el-table-column prop="id" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="name" label="分类名称" min-width="120px">
        </el-table-column>
        <el-table-column prop="type" label="类型" >
          <template slot-scope="scope">
            <div v-if="scope.row.type==1" >酒品分类</div>
            <div v-else >套餐分类</div>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="顺序">
        </el-table-column>
        <el-table-column prop="status" label="状态" >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status===1" type="success">启用</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
        </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="200">
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="200">
        </el-table-column>
          <el-table-column prop="createUser" label="创建人" width="150">
        </el-table-column>
        <el-table-column prop="updateUser" label="修改人" width="150">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <!--  <template>标签结合slot-scope属性用于创建作用域插槽（Scoped Slots），它允许父组件向子组件传递可复用的模板，并且能够访问到子组件传递过来的数据。-->
          <template slot-scope="scope">
            <el-button type="primary" @click="handleUpdateCategory(scope.row)">修改</el-button>
            <el-button type="text" @click="handleToggleStatus(scope.row)">{{ scope.row.status == 1 ? '禁用' : '启用' }}
            </el-button>
            <el-button type="danger" @click="handleDeleteCategory(scope.row)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
      <el-pagination
          style="text-align: center;margin-top: 10px"
          @size-change="handlePageSizeChange"
          @current-change="handlePageChange"
          :current-page="page"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      name: '',  //分类名称
      page: 1,   //页码
      pageSize: 10,    //每页记录数
      type: null,    //分类类型   1 酒品分类 2 套餐分类
      total: 0,    //总记录数
      records: [] , //当前页要展示的类别集合

      options: [{
        value: '1',
        label: '酒品分类'
      }, {
        value: '2',
        label: '套餐分类'
      }],
      value: ''
    }
  },
  created() {
    this.loadCategory();
  },
  methods: {

    // 查询类别
    loadCategory() {
      const params = {name: this.name,type:this.value, page: this.page, pageSize: this.pageSize}
      request.get("/admin/category/page", {params}).then(res => {
        if (res.code === 1) {
          this.total = res.data.total
          this.records = res.data.records
        }
      }).catch(err => {
        this.$message.error('请求出错了：' + err.message)
      })
    },

    // 新增类别（跳转到新增类别组件）
    handleAddCategory() {
      this.$router.push('/category/add')
    },

    // 编辑类别
    handleUpdateCategory(row) {
      this.$router.push({
        path: '/category/add',
        query: {
          id: row.id,
          type: row.type,
          name: row.name,
          sort: row.sort

        }
      });
    },

    // 删除类别
    handleDeleteCategory(row) {
      this.$confirm('确定要删除该类别吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.delete(`/admin/category/${row.id}`).then(res => {
          if (res.code === 1) {
            this.$message.success('删除成功');
            this.loadCategory();
          }
        });
      }).catch(() => {
        this.$message.info('取消操作');
      });
    },

    // 重置搜索框
    resetSearch() {
      this.name = '';
      this.loadCategory();
    },

    // 启用/禁用类别
    handleToggleStatus(row) {
      this.$confirm(`确定要${row.status === 1 ? '禁用' : '启用'}该类别吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const p = {
          id: row.id,
          status: row.status === 1 ? 0 : 1
        };
        request.post(`/admin/category/status/${p.status}`, JSON.stringify(p.id)).then(res => {
          if (res.code === 1) {
            this.$message.success('操作成功');
            this.loadCategory();
          }
        });
      }).catch(() => {
        this.$message.info('取消操作');
      });
    },

    handlePageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.loadCategory();
    },

    handlePageChange(page) {
      this.page = page;
      this.loadCategory();
    }
  }
}
</script>

<style scoped>
/* 在这里添加自定义样式 */
</style>